<template>
  <div id="chinaMap">
    <div id="threejs"></div>
    <div class="map_title">省区设备分布</div>
    <div class="map_data">
      <div v-for="(item, index) in leftData" :key="index" class="map_data_item">
        <p class="text">{{ item.text }}</p>
        &nbsp;
        <p :style="{ color: item.color }" class="num">{{ item.value }}</p>
      </div>
    </div>
    <!-- 右侧按钮 -->
    <div class="rightButton">
      <div
        v-for="(item, index) in rightButItem"
        :key="index"
        :value="item.value"
        :class="item.selected ? 'selected common' : 'common'"
        @click="rightButClick(item)"
      >
        {{ item.name }}
      </div>
    </div>

    <!-- 地图名称元素 -->
    <div id="provinceName" style="display: none"></div>

    <!-- 光柱上方数值元素 -->
    <div id="cylinderValue" style="display: none"></div>

    <!-- 地图标牌元素 -->
    <div id="mapTag" style="display: none">
      <div class="content">
        <div class="name">设备:</div>
        <div id="mapTag_value" class="value">0</div>
      </div>
      <div class="arrow"></div>
    </div>

    <!-- 弹框元素 -->
    <!-- <div id="popup" style="display: none">
      <div class="popup_line"></div>
      <div class="popup_Main">
        <div class="popupMain_top"></div>
        <div class="popup_content">
          <div class="popup_head">
            <div class="popup_title">
              <div class="title_icon"></div>
              <div id="popup_Name">湖北省</div>
            </div>
            <div class="close" @click="popupClose"></div>
          </div>
          <div class="popup_item">
            <div>当前流入：</div>
            <div class="item_value">388万人次</div>
          </div>
          <div class="popup_item">
            <div>景区容量：</div>
            <div class="item_value">2688万人次</div>
          </div>
          <div class="popup_item">
            <div>交通资源利用率：</div>
            <div class="item_value">88.7%</div>
          </div>
          <div class="popup_item">
            <div>省市热搜指数：</div>
            <div class="item_value">88.7%</div>
          </div>
        </div>
        <div class="popupMain_footer"></div>
      </div>
    </div> -->
  </div>
</template>

<script>
import * as THREE from 'three'
import { top } from '@/api/homePage'
import TWEEN from '@tweenjs/tween.js'
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js'
import {
  scene,
  camera,
  controls,
  renderer,
  css3DRenderer,
  css2DRenderer,
  outlinePass,
  composer,
  finalComposer
  // mirror
} from './mapComponents/baseConfig/index.js'
import {
  initMap,
  cityData,
  mapUf,
  waterObj,
  projection
} from './mapComponents/initChinaMap/index.js'
import { gridHelper, meshPoint } from './mapComponents/backgroundMesh/index.js'
import { initMapFloat } from './mapComponents/mapFloat/index.js'
import {
  circleUf,
  outerCircle,
  innerCircle,
  diffuseCircle,
  gradientPlane,
  planeUf
} from './mapComponents/backgroundCircle/index.js'
// import {
//   flyGroup,
//   updateFlyLine,
//   flyLineAnimation
// } from './mapComponents/flyLine/index.js'
import {
  cylinderGroup,
  createCylindern,
  cylinderObj,
  apertureAnimation
} from './mapComponents/cylinder/index.js'
import { createMapTag, tagGroup } from './mapComponents/mapTag/index.js'
// import {
//   particlesUpdate,
//   createParticles,
//   particles
// } from './mapComponents/particles/index.js'
import { disposeObject } from './mapComponents/disposeObject/index.js'

let mapModel, outLineModel, css2Dpopup
export default {
  data() {
    return {
      rightButItem: [
        { value: 'tourism', name: '刷色图', selected: false },
        { value: 'cylinder', name: '棱柱', selected: false },
        // { value: 'flyLine', name: '飞线', selected: false },
        { value: 'tag', name: '标牌', selected: true }
        // { value: 'particles', name: '粒子', selected: false },
        // { value: 'mirror', name: '倒影', selected: false },
        // { value: 'ripple', name: '波纹', selected: false }
      ],
      clock: new THREE.Clock(),
      divTag: null,
      areaData: [],
      leftData: [
        {
          text: '设备总数',
          value: 0,
          color: '#FFD62D'
        },
        {
          text: '在线率',
          value: '0%',
          color: '#70E2D4'
        },
        {
          text: '告警数',
          value: 0,
          color: '#FC7070'
        },
        {
          text: '用户数量',
          value: 0,
          color: '#6CCAFF'
        }
      ],
      // 地图颜色配置
      mapColors: {
        baseColor: new THREE.Color('#00a6a6'), // 修改为青色基础颜色
        highlightColor: new THREE.Color('#00d8d8'), // 高亮颜色也调整为更亮的青色
        // 添加柔和的省份颜色数组，用于刷色图功能
        provinceColors: [
          '#2d5e4c', // 深绿色
          '#3a7a7a', // 柔和的青绿色
          '#4a6a8a', // 柔和的蓝灰色
          '#5a6a6a', // 柔和的灰色
          '#6a7a8a', // 柔和的蓝灰色
          '#4a7a6a', // 柔和的绿灰色
          '#5a7a7a', // 柔和的青灰色
          '#6a6a7a', // 柔和的深灰色
          '#4a5a7a', // 柔和的蓝色
          '#5a6a8a', // 柔和的灰蓝色
          '#3d7e5f', // 中绿色
          '#4d8e6f', // 浅绿色
          '#6b9e7f', // 淡绿色
          '#8aae8f', // 灰绿色
          '#a0b86a', // 黄绿色
          '#c0c850', // 浅黄色
          '#d0a840', // 橙黄色
          '#c06830', // 橙色
          '#a04020', // 红棕色
          '#b02020' // 红色
        ]
      }
    }
  },
  mounted() {
    this.getCount()
    this.initThreeJS()

    // 添加ResizeObserver监听容器大小变化
    this.setupResizeObserver()

    // 确保地图居中显示
    setTimeout(() => {
      this.eventAnimation()
    }, 500)
  },
  methods: {
    async getCount() {
      const {
        data: { data }
      } = await top()

      this.leftData[0].value = data.deviceTotal
      this.leftData[1].value = `${data.deviceOnlineFate}%`
      this.leftData[2].value = data.policeTotal
      this.leftData[3].value = data.userTotal
    },

    async initThreeJS() {
      const container = document.getElementById('threejs')
      container.appendChild(renderer.domElement)
      container.appendChild(css3DRenderer.domElement)
      container.appendChild(css2DRenderer.domElement)

      // 初始化时设置渲染器尺寸
      const width = container.clientWidth
      const height = container.clientHeight

      // 提高渲染器分辨率和质量
      renderer.setPixelRatio(window.devicePixelRatio)
      renderer.setSize(width, height)
      css3DRenderer.setSize(width, height)
      css2DRenderer.setSize(width, height)

      // 设置相机纵横比和较小的FOV使场景看起来更大
      camera.aspect = width / height
      camera.fov = 40 // 较小的FOV使场景看起来更大
      camera.updateProjectionMatrix()

      // 设置背景色为深蓝色
      scene.background = new THREE.Color('#001326')

      // 调整网格颜色
      if (gridHelper && gridHelper.material) {
        gridHelper.material.color = new THREE.Color('#0a4a6a')
        gridHelper.material.opacity = 0.4
        gridHelper.material.needsUpdate = true
      }

      // 调整圆环颜色
      if (outerCircle && outerCircle.material) {
        outerCircle.material.color = new THREE.Color('#0078b4')
        outerCircle.material.needsUpdate = true
      }
      if (innerCircle && innerCircle.material) {
        innerCircle.material.color = new THREE.Color('#0078b4')
        innerCircle.material.needsUpdate = true
      }

      createCylindern()
      // createParticles()

      mapModel = await initMap()

      // 调整地图位置，使其居中
      mapModel.position.set(0, 0, 0)

      // 更新地图颜色为青色
      this.updateMapColors(mapModel)

      // 保存每个省份的初始颜色
      mapModel.traverse(obj => {
        if (obj.material && obj.material[0]) {
          obj.originalColor = obj.material[0].color.clone()
          obj.originalMetalness = obj.material[0].metalness
          obj.originalRoughness = obj.material[0].roughness
          obj.originalMap = obj.material[0].map
        }
      })

      initMapFloat(camera, mapModel)
      // this.initMapClickGlow()

      createMapTag(cityData, waterObj)
      scene.add(
        mapModel,
        gridHelper,
        meshPoint,
        outerCircle,
        innerCircle,
        diffuseCircle,
        gradientPlane,
        tagGroup
      )

      // 设置控制器限制，使地图保持在视野中央
      controls.enableDamping = true
      controls.dampingFactor = 0.1
      controls.minDistance = 80
      controls.maxDistance = 450
      controls.minPolarAngle = Math.PI * 0.1
      controls.maxPolarAngle = Math.PI * 0.7

      // 设置相机位置，使地图居中
      camera.position.set(0, 250, 150)
      controls.target.set(0, 0, 0)
      controls.update()

      this.render()

      // 添加窗口大小变化监听器
      window.addEventListener('resize', this.onWindowResize)
    },

    render() {
      requestAnimationFrame(this.render)
      camera.updateProjectionMatrix()
      controls.update()
      let deltaTime = this.clock.getDelta()
      mapUf.uTime.value += deltaTime
      if (mapUf.uTime.value >= 5) {
        mapUf.uTime.value = 0.0
      }

      if (this.rightButItem[1].selected) apertureAnimation()

      outerCircle.rotation.z -= 0.003
      innerCircle.rotation.z += 0.003

      // if (this.rightButItem[2].selected) {
      //   flyLineAnimation()
      // }

      // if (this.rightButItem[6].selected) {
      //   circleUf.uTime.value += deltaTime
      //   if (circleUf.uTime.value >= 6) {
      //     circleUf.uTime.value = 0.0
      //   }
      // }

      // if (this.rightButItem[4].selected) {
      //   particlesUpdate()
      // }

      TWEEN.update()
      scene.traverse(this.darkenMaterial)
      composer.render()
      scene.traverse(this.restoreMaterial)
      finalComposer.render()
      css3DRenderer.render(scene, camera)
      css2DRenderer.render(scene, camera)
    },

    rightButClick(item) {
      item.selected = !item.selected
      if (item.value === 'tourism') {
        mapModel.traverse(obj => {
          if (obj.color) {
            if (item.selected) {
              // 刷色图功能开启 - 为每个省份分配一个柔和的颜色
              // 使用省份名称的哈希值来确定颜色索引，确保同一省份总是获得相同的颜色
              const parentName = obj.parent ? obj.parent.name : ''

              // 根据省份数据分配颜色
              let provinceColor

              // 获取省份对应的设备数据
              if (parentName && obj.parent) {
                const key = parentName
                  .replace(/省$/, '')
                  .replace(/市$/, '')
                  .replace(/自治区$/, '')
                const count = waterObj[key] || 0

                // 根据设备数量分配颜色
                // 0-2: 绿色系
                // 3-5: 青色系
                // 6-10: 黄色系
                // 10+: 红色系
                if (count >= 10) {
                  // 红色系 - 使用后面的颜色
                  const redIndex =
                    16 + (Math.abs(this.hashCode(parentName)) % 4)
                  provinceColor = new THREE.Color(
                    this.mapColors.provinceColors[redIndex]
                  )
                } else if (count >= 6) {
                  // 黄色系
                  const yellowIndex =
                    14 + (Math.abs(this.hashCode(parentName)) % 3)
                  provinceColor = new THREE.Color(
                    this.mapColors.provinceColors[yellowIndex]
                  )
                } else if (count >= 3) {
                  // 青色系
                  const cyanIndex =
                    7 + (Math.abs(this.hashCode(parentName)) % 7)
                  provinceColor = new THREE.Color(
                    this.mapColors.provinceColors[cyanIndex]
                  )
                } else {
                  // 绿色系
                  const greenIndex = Math.abs(this.hashCode(parentName)) % 7
                  provinceColor = new THREE.Color(
                    this.mapColors.provinceColors[greenIndex]
                  )
                }
              } else {
                // 如果没有找到省份名称，使用默认颜色
                const colorIndex = this.getProvinceColorIndex(parentName)
                provinceColor = new THREE.Color(
                  this.mapColors.provinceColors[colorIndex]
                )
              }

              // 保存原始颜色，以便恢复
              if (!obj._originalColor) {
                obj._originalColor = obj.material[0].color.clone()
                obj._originalMetalness = obj.material[0].metalness
                obj._originalRoughness = obj.material[0].roughness
                obj._originalMap = obj.material[0].map
              }

              obj.material[0].color = provinceColor
              obj.material[0].metalness = 0.5 // 降低金属感，使颜色更柔和
              obj.material[0].roughness = 0.6 // 增加粗糙度，使颜色更柔和
              obj.material[0].map = undefined
              obj.material[0].needsUpdate = true
            } else {
              // 恢复到原始颜色
              if (obj._originalColor) {
                obj.material[0].color = obj._originalColor
                obj.material[0].metalness = obj._originalMetalness
                obj.material[0].roughness = obj._originalRoughness
                obj.material[0].map = obj._originalMap
                obj.material[0].needsUpdate = true

                // 清除保存的原始颜色
                delete obj._originalColor
                delete obj._originalMetalness
                delete obj._originalRoughness
                delete obj._originalMap
              } else if (obj.originalColor) {
                // 使用初始化时保存的原始颜色
                obj.material[0].color = obj.originalColor.clone()
                obj.material[0].metalness = obj.originalMetalness
                obj.material[0].roughness = obj.originalRoughness
                obj.material[0].map = obj.originalMap
                obj.material[0].needsUpdate = true
              } else {
                // 如果没有保存原始颜色，则使用默认的深青色
                obj.material[0].color = this.mapColors.baseColor.clone()
                obj.material[0].metalness = 0.65
                obj.material[0].roughness = 0.35
                obj.material[0].map = undefined
                obj.material[0].needsUpdate = true
              }
            }
          }
        })
      }
      // else if (item.value === 'flyLine') {
      //   if (item.selected) {
      //     scene.add(flyGroup)
      //     updateFlyLine('湖北', cityData)
      //   } else {
      //     scene.remove(flyGroup)
      //   }
      // }
      else if (item.value === 'cylinder') {
        if (item.selected) {
          scene.add(cylinderGroup)
          for (let key in cylinderObj) {
            cylinderObj[key].visible = true
            cylinderObj[key].children[0].visible = true
          }
        } else {
          for (let key in cylinderObj) {
            cylinderObj[key].visible = false
            cylinderObj[key].children[0].visible = false
          }
          for (const obj of cylinderGroup.children) {
            if (obj.children) {
              css2DRenderer.domElement.removeChild(obj.children[0].element)
            }
          }
          scene.remove(cylinderGroup)
        }
      }
      // else if (item.value === 'ripple') {
      //   diffuseCircle.visible = item.selected
      //   circleUf.uTime.value = 0.0
      // }
      //  else if (item.value === 'mirror') {
      //   if (item.selected) {
      //     scene.add(mirror)
      //     planeUf.opacitys.radius = 0.05
      //     planeUf.opacitys.value = 0.4
      //   } else {
      //     scene.remove(mirror)
      //     planeUf.opacitys.radius = 0.35
      //     planeUf.opacitys.value = 0.7
      //   }
      // }
      else if (item.value === 'tag') {
        if (item.selected) {
          scene.add(tagGroup)
        } else {
          for (const obj of tagGroup.children) {
            css2DRenderer.domElement.removeChild(obj.element)
          }
          scene.remove(tagGroup)
        }
      }
      //  else if (item.value === 'particles') {
      //   if (item.selected) {
      //     scene.add(particles)
      //   } else {
      //     scene.remove(particles)
      //   }
      // }
    },

    // initMapClickGlow() {
    //   this.divTag = document.getElementById('popup')
    //   const widthScale = window.innerWidth / 1920
    //   const heightScale = window.innerHeight / 941
    //   this.divTag.style.top += (37 * heightScale).toFixed(2) + 'px'
    //   this.divTag.style.left += (390 * widthScale).toFixed(2) + 'px'
    //   css2Dpopup = new CSS2DObject(this.divTag)
    //   css2Dpopup.renderOrder = 99
    //   const nameDiv = document.getElementById('popup_Name')

    //   let temp = true
    //   addEventListener('click', e => {
    //     const px = e.offsetX
    //     const py = e.offsetY
    //     const x = (px / window.innerWidth) * 2 - 1
    //     const y = -(py / window.innerHeight) * 2 + 1
    //     const raycaster = new THREE.Raycaster()
    //     raycaster.setFromCamera(new THREE.Vector2(x, y), camera)
    //     let intersects = raycaster.intersectObjects(mapModel.children)
    //     intersects = intersects.filter(intersect => {
    //       return (
    //         intersect.object.name !== '光圈' &&
    //         intersect.object.name !== '光柱' &&
    //         intersect.object.parent.name !== '省份边界线'
    //       )
    //     })
    //     if (intersects.length > 0) {
    //       if (outLineModel) {
    //         disposeObject(outLineModel)
    //         outLineModel.parent.remove(outLineModel)
    //         outLineModel = null
    //       }
    //       const rayModel = intersects[0].object.parent
    //       const mapLineData = rayModel.userData.mapData
    //       const shape = new THREE.Shape()
    //       if (mapLineData.type === 'MultiPolygon') {
    //         mapLineData.coordinates.forEach((coordinate, index) => {
    //           if (index === 0) {
    //             coordinate.forEach(rows => {
    //               rows.forEach(row => {
    //                 const [x, y] = projection(row)
    //                 if (index === 0) {
    //                   shape.moveTo(x, y)
    //                 }
    //                 shape.lineTo(x, y)
    //               })
    //             })
    //           }
    //         })
    //       }
    //       if (mapLineData.type === 'Polygon') {
    //         mapLineData.coordinates.forEach(coordinate => {
    //           mapLineData.coordinates.forEach((rows, index) => {
    //             if (index === 0) {
    //               rows.forEach(row => {
    //                 const [x, y] = projection(row)
    //                 if (index === 0) {
    //                   shape.moveTo(x, y)
    //                 }
    //                 shape.lineTo(x, y)
    //               })
    //             }
    //           })
    //         })
    //       }
    //       const geometry = new THREE.ShapeGeometry(shape)
    //       const material = new THREE.MeshBasicMaterial({
    //         color: rayModel.children[1].material[0].color,
    //         map: rayModel.children[1].material[0].map,
    //         side: THREE.DoubleSide
    //       })
    //       let mesh = new THREE.Mesh(geometry, material)
    //       mesh.rotateX(-Math.PI)
    //       mesh.name = '描边模型'

    //       outLineModel = mesh
    //       rayModel.add(outLineModel)

    //       outlinePass.selectedObjects = [outLineModel]
    //       const center = rayModel.userData.center
    //       css2Dpopup.position.set(center[0], center[1], 0)
    //       outLineModel.add(css2Dpopup)
    //       nameDiv.innerHTML = rayModel.parent.name

    //       new TWEEN.Tween({ opacity: 0 })
    //         .to({ opacity: 1.0 }, 500)
    //         .onUpdate(obj => {
    //           this.divTag.style.opacity = obj.opacity
    //         })
    //         .start()
    //     }
    //   })
    // },

    popupClose() {
      if (outLineModel) {
        outlinePass.selectedObjects = []
        new TWEEN.Tween({ opacity: 1 })
          .to({ opacity: 0 }, 500)
          .onUpdate(obj => {
            this.divTag.style.opacity = obj.opacity
          })
          .onComplete(() => {
            disposeObject(outLineModel)
            outLineModel.parent.remove(outLineModel)
            outLineModel = null
          })
          .start()
      }
    },

    darkenMaterial(object) {
      const blackMaterialCache = new Map()

      object.traverse(obj => {
        if (obj.name.includes('发光')) {
          return
        }

        // 保存和清除场景背景
        if (obj instanceof THREE.Scene) {
          if (!obj._originalBg) {
            obj._originalBg = obj.background
            obj.background = null
          }
        }

        const material = obj.material
        if (material) {
          if (!obj._originalMaterial) {
            obj._originalMaterial = material

            // 尝试从缓存获取黑色材质
            let blackMaterial = blackMaterialCache.get(material)
            if (!blackMaterial) {
              const Proto = Object.getPrototypeOf(material).constructor
              blackMaterial = new Proto({ color: new THREE.Color('#000') })
              blackMaterialCache.set(material, blackMaterial)
            }
            obj.material = blackMaterial
          }
        }
      })
    },

    // 还原材质
    restoreMaterial(object) {
      object.traverse(obj => {
        if (obj.name.includes('发光')) {
          return
        }

        // 恢复场景背景
        if (obj instanceof THREE.Scene) {
          if (obj._originalBg) {
            obj.background = obj._originalBg
            delete obj._originalBg
          }
        }

        if (obj._originalMaterial) {
          obj.material = obj._originalMaterial
          delete obj._originalMaterial
        }
      })
    },

    // 添加窗口大小变化处理函数
    onWindowResize() {
      const container = document.getElementById('threejs')
      if (!container) return

      const width = container.clientWidth
      const height = container.clientHeight

      camera.aspect = width / height
      camera.updateProjectionMatrix()

      renderer.setSize(width, height)
      css3DRenderer.setSize(width, height)
      css2DRenderer.setSize(width, height)
      composer.setSize(width, height)
      finalComposer.setSize(width, height)
    },

    eventAnimation() {
      // 使用动画将相机移动到合适位置，使地图居中
      new TWEEN.Tween(camera.position)
        .to(new THREE.Vector3(0, 250, 150), 1500)
        .easing(TWEEN.Easing.Sinusoidal.InOut)
        .onUpdate(() => {
          controls.target.set(0, 0, 0)
          controls.update()
        })
        .start()
    },

    // 设置ResizeObserver监听容器大小变化
    setupResizeObserver() {
      const container = document.getElementById('chinaMap')
      if (!container) return

      // 使用ResizeObserver监听容器大小变化
      this.resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
          // 当容器大小发生变化时调整Three.js渲染大小
          this.onWindowResize()
        }
      })

      // 开始观察
      this.resizeObserver.observe(container)
    },

    // 获取省份颜色索引的辅助方法
    getProvinceColorIndex(provinceName) {
      if (!provinceName) return 0

      // 使用简单的哈希函数将省份名称转换为颜色索引
      const hashCode = this.hashCode(provinceName)

      // 确保索引在颜色数组范围内
      const colorIndex =
        Math.abs(hashCode) % this.mapColors.provinceColors.length
      return colorIndex
    },

    // 计算字符串哈希值的辅助方法
    hashCode(str) {
      if (!str) return 0

      let hash = 0
      for (let i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash)
      }
      return hash
    },

    // 更新地图颜色
    updateMapColors(model) {
      if (!model) return

      model.traverse(obj => {
        if (obj.material && obj.material[0]) {
          // 设置基础颜色为青色
          obj.color = this.mapColors.baseColor.clone()
          obj.material[0].color = this.mapColors.baseColor.clone()
          obj.material[0].metalness = 0.7
          obj.material[0].roughness = 0.3
          obj.material[0].emissive = new THREE.Color('#00ffff')
          obj.material[0].emissiveIntensity = 0.15
          obj.material[0].needsUpdate = true
        }

        // 修改边界线颜色
        if (obj.name === '边线' && obj.material) {
          obj.material.color = new THREE.Color('#00ffff')
          obj.material.opacity = 0.8
          obj.material.needsUpdate = true
        }
      })

      // 添加地图整体的发光效果
      const mapGlow = new THREE.AmbientLight('#00ffff', 0.2)
      scene.add(mapGlow)
    }
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('resize', this.onWindowResize)

    // 移除ResizeObserver
    if (this.resizeObserver) {
      this.resizeObserver.disconnect()
    }
  }
}
</script>

<style lang="scss">
@media (max-width: 4400px) {
  html {
    font-size: 22px;
  }
}

@media (max-width: 3800px) {
  html {
    font-size: 20px;
  }
}

@media (max-width: 3200px) {
  html {
    font-size: 18px;
  }
}

@media (max-width: 2600px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 2000px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 1400px) {
  html {
    font-size: 12px;
  }
}

@media (max-width: 800px) {
  html {
    font-size: 10px;
  }
}

.map_data {
  width: 100%;
  height: 12vh;
  position: absolute;
  font-weight: 600;
  letter-spacing: 0.2vw;
  top: 5%;
  display: flex;
  align-items: center;
  justify-content: center;

  .text {
    color: #fff;
    font-size: 18px;
  }
  .num {
    font-size: 30px;
    font-family: Teko-Regular, Teko;
  }

  .map_data_item {
    display: flex;
    margin-right: 3%;
    align-items: center;
    justify-content: center;
  }
}

.map_title {
  color: #bbb;
  font-size: 1.8vw;
  position: absolute;
  font-weight: 600;
  letter-spacing: 0.1vw;
  top: 3.5%;
}

#chinaMap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

#threejs {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rightButton {
  position: absolute;
  right: 1vw;
  bottom: 18vh;
  width: 4vw;
  z-index: 10;

  .common {
    border: 1px solid #00ffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.2vh 0;
    color: #fafafa;
    opacity: 0.5;
    font-size: 0.8vw;
    cursor: pointer;
    transition: 1s;
  }

  .selected {
    opacity: 1 !important;
    transition: 1s;
  }
}

#provinceName {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  color: #8ee5ee;
  padding: 10px;
  width: 200px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 13px;
}

#popup {
  z-index: 999;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 41.66vw;
  height: 26.59vh;
  display: flex;

  .popup_line {
    margin-top: 4%;
    width: 24%;
    height: 26%;
    background: url('./mapComponents/public/popup_line.png') no-repeat;
    background-size: 100% 100%;
  }

  .popup_Main {
    width: 35%;
    height: 80%;

    .popupMain_top {
      width: 100%;
      height: 10%;
      background: url('./mapComponents/public/popupMain_head.png') no-repeat;
      background-size: 100% 100%;
    }

    .popupMain_footer {
      width: 100%;
      height: 10%;
      background: url('./mapComponents/public/popupMain_footer.png') no-repeat;
      background-size: 100% 100%;
    }

    .popup_content {
      color: #fafafa;
      background-image: linear-gradient(
        to bottom,
        rgba(15, 36, 77, 1),
        rgba(8, 124, 190, 1)
      );
      border-radius: 10px;
      width: 100%;
      height: 70%;
      padding: 5% 0%;

      .popup_head {
        width: 100%;
        height: 12%;
        margin-bottom: 2%;
        display: flex;
        align-items: center;

        .popup_title {
          color: #8ee5ee;
          font-size: 1vw;
          letter-spacing: 5px;
          width: 88%;
          height: 100%;
          display: flex;
          align-items: center;

          .title_icon {
            width: 0.33vw;
            height: 100%;
            background: #2586ff;
            margin-right: 10%;
          }
        }

        .close {
          cursor: pointer;
          pointer-events: auto;
          width: 1.5vw;
          height: 1.5vw;
          background: url('./mapComponents/public/close.png') no-repeat;
          background-size: 100% 100%;
        }
      }

      .popup_item {
        display: flex;
        align-items: center;
        width: 100%;
        padding-left: 5%;
        height: 16%;
        border-radius: 10px;
        margin: 3% 0%;
        margin-left: 8%;

        div {
          line-height: 100%;
        }

        .item_value {
          font-size: 0.9vw;
          color: #00ffff;
          font-weight: 600;
          letter-spacing: 2px;
        }
      }
    }
  }
}

#cylinderValue {
  position: absolute;
  top: 0;
  left: 0;
  color: #bbffff;
}

#mapTag {
  z-index: 997;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .content {
    width: 100%;
    height: 100%;
    padding: 2px 3px;
    background: #0e2346;
    border: 1px solid #6298a9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fafafa;

    #mapTag_value {
      color: #ffd700;
    }
  }

  .content::before {
    content: '';
    width: 100%;
    // height: calc(100% - 1vw);
    position: absolute;
    background: linear-gradient(to top, #26aad1, #26aad1) left top no-repeat,
      //上左
        linear-gradient(to right, #26aad1, #26aad1) left top no-repeat,
      linear-gradient(to top, #26aad1, #26aad1) right bottom no-repeat,
      //下右
        linear-gradient(to left, #26aad1, #26aad1) right bottom no-repeat; //右下
    background-size: 2px 10px, 16px 2px, 2px 10px, 16px 2px;
    pointer-events: none;
  }

  .arrow {
    background: url('./mapComponents/public/arrow.png') no-repeat;
    background-size: 100% 100%;
    width: 1vw;
    height: 1vw;
  }
}
</style>
